<template>
	<view>
		<view class="tag-select">
			<scroll-view scroll-x class="tag-scroll">
				<view class="tip-list">
					<view class="tag blue" v-for="(item, index) in tagList" :key="index">
						<view class="tag-border">
							<view>#{{item.title}}#</view>
							<view class="close" @click="tagDel(item)">
								<u-icon name="guanbi1" custom-prefix="iconfont"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="tag-list">
			<view class="tag-box blue" @click="more">
				<u-icon name="huati" custom-prefix="iconfont"></u-icon>
				<view class="tag-text">更多话题</view>
			</view>
			<scroll-view scroll-x class="tag-scroll">
				<view class="tip-list">
					<view class="tag gray" @click="tagAdd(item)" v-for="(item, index) in dataList" :key="index">
						<view class="tag-border">
							<view>#{{item.title}}#</view>
							<view class="hot">
								<u-icon name="huo" custom-prefix="iconfont"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<tag-popup @tagOk="tagOk" :topicList="topicList" :fansTopicList="fansTopicList" ref="popup"></tag-popup>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				// 动态数据
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
		},
		data() {
			return {
				show: false,
				tagList: [],
				topicList: [],
				fansTopicList: [],
			}
		},
		created() {
			this.init();
	    },
		methods: {
			init() {
				
			},
			tagAdd(tag) {
				var flag = this.checkTag(tag.id);
				if(!flag){
					this.tagList = [];
					this.tagList.push(tag);
				}
				this.$emit("input", this.listToString(this.tagList));
			},
			// 对象转成指定字符串分隔
			listToString(list, separator) {
			  let strs = "";
			  separator = separator || ",";
			  for (let i in list) {
			    strs += list[i].id + separator;
			  }
			  return strs != '' ? strs.substr(0, strs.length - 1) : '';
			},
			tagDel(tag) {
				var index = this.tagList.indexOf(tag);
				this.tagList.splice(index, 1);
			},
			tagOk(tagList) {
				for(var i=0;i<tagList.length;i++){
					var tag = tagList[i];
					var flag = this.checkTag(tag.id);
					if(!flag){
						this.tagList.push(tag);
					}
				}
				this.$emit("input", this.listToString(this.tagList));
			},
			checkTag(id) {
				for(var i=0;i<this.tagList.length;i++){
					var tag = this.tagList[i];
					if(tag.id == id){
						return true;
					}
				}
				return false;
			},
			more() {
				this.$emit('preSave', (res)=> {
				   if(res.code == 200){
					 this.topicList = res.topicList;
					 this.fansTopicList = res.fansTopicList;
				     this.$refs.popup.open();
				   }
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tag-list {
		display: flex;
		align-items: center;
	}
	
	.tag-box {
		display: flex;
		background-color: #f4f5f6;
		justify-content: center;
		align-items: center;
		border-radius: 50px;
		padding: 5px;
		font-size: 24rpx;
		margin-right: 10px;
		width: 130px;
	}
	
	.tag-text {
		margin-left: 5px;
		font-size: 12px;
	}
	
	.tag-scroll {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.tag-dot {
		background-color: #606266;
		width: 15px;
		height: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		border-radius: 100%;
		font-size: 12px;
	}
	
	.tip-list .tag:last-child {
		margin-right: 0;
	}
	.tag {
		display: inline-block;
		margin-right: 10px;
		position: relative;
		padding: 5px 10px;
		font-size: 12px;
		border-radius: 20px;
	}
	.gray {
		background-color: #ddd;
	}
	.blue {
		background-color: #f4f5f6;
		color: #606266;
	}
	.tag-select {
		display: flex;
		margin-bottom: 20px;
		height: 25px;
	}
	.tag-border {
		display: flex;
		align-items: center;
	}
	.close {
		margin-left: 5px;
		color: #c0baba;
		font-size: 12px;
	}
	.hot {
		margin-left: 5px;
		color: red;
		font-size: 12px;
	}
</style>
